<template>
    <div class="vuedemo">
        <h1>Hello, Vue!</h1>
        <p>{{ message }}</p>
        <button @click="changeMessage">Change Message</button>
    </div>
</template>

<script>
export default {
    name: 'Vuedemo',
    data() {
        return {
            message: '欢迎来到我的米奇妙妙屋!'
        }
    },
    methods: {
        changeMessage() {
            this.message = '嗨嗨！你好!'
        }
    }
}
</script>

<style scoped>
.vuedemo {
    padding: 20px;
    border: 1px solid #ccc;
    border-radius: 4px;
}
</style>